<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiEndpointController" class="page container-pf-nav-pf-vertical container-fluid" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content apiman-entity-overview">
          <!-- Content Summary -->
          <div class="col-md-12">
            <div class="title" apiman-i18n-key="managed-endpoint-impl">Managed Endpoint Information</div>
            <p class="explanation" apiman-i18n-key="managed-endpoint-explanation">
                To successfully invoke this managed API, a client must send the request to the appropriate API gateway
                endpoint. When invoking the API through an API contract, a valid API Key must be included in each
                request. If the API is public, it can be invoked without an API Key directly through the endpoint below.
            </p>
            <div ng-show="!version.publicAPI">
              <div class="apiman-divider-40"></div>
                <div apiman-i18n-key="warning-not-public" class="alert alert-warning no-icon">Warning: This API is not
                    <strong>public</strong>. This endpoint will only work if a valid API Key is included in requests made to it.
                </div>
            </div>
            <hr />
            <div class="apiman-form-label">
              <p apiman-i18n-key="managed-endpoint">Managed Endpoint</p>
            </div>
              <div class="input-group" style="width: 80%">
                  <input type="text"
                         style="background-color: white; color: black"
                         class="apiman-endpoint form-control"
                         readonly="readonly"
                         data-field="mang        edEndpoint"
                         value="{{ managedEndpoint.managedEndpoint }}">
                  <span class="input-group-btn">
                      <button clipboard
                              text="managedEndpoint.managedEndpoint"
                              class="btn btn-default"
                              type="button"
                              on-copied="copySuccess()"
                              on-error="copyFail(err)"
                              data-toggle="tooltip"
                              data-placement="bottom"
                              data-original-title="Copy to clipboard"
                              ng-mouseleave="tooltipReset()"
                              ng-click="tooltipChange()">
                        <span class="glyphicon glyphicon-copy"></span>
                      </button>
                  </span>
              </div>
          </div>
          <!-- /Content Summary -->
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
